import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Table, Card } from 'antd';
import moment from 'moment';
import router from 'umi/router';

@Form.create()
class EntryBasic extends PureComponent {
  payDetail = () => {
    const { payDetail } = this.props;
    payDetail(true);
  };

  payDetailShut = () => {
    const { payDetail } = this.props;
    payDetail(false);
  };

  render() {
    const { careerMatInfor } = this.props;
    const { serDto } = careerMatInfor;
    // const { scroll, visible } = this.state;
    const insAccuInfoColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
        render: val => val || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        fixed: 'left',
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '缴费方式',
        dataIndex: 'payWayName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => val || '--',
      },
      {
        title: '缴费账户',
        dataIndex: 'accoName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => val || '--',
      },
      {
        title: '申报工资',
        dataIndex: 'decWage',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业基数',
        dataIndex: 'entpBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人基数',
        dataIndex: 'perBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业比例(%)',
        dataIndex: 'entpProp',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人比例(%)',
        dataIndex: 'perProp',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },

      {
        title: '企业附加(元)',
        dataIndex: 'entpAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',

        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人附加(元)',
        dataIndex: 'perAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业缴费',
        dataIndex: 'entpPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人缴费',
        dataIndex: 'perPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '缴纳金额',
        dataIndex: 'payAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '政策组合',
        dataIndex: 'grpName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        // eslint-disable-next-line consistent-return
        render: (_, record) => {
          if (+record.ass !== 1) {
            return (
              <a
                onClick={() =>
                  router.push(
                    `/searchmanage/policysearch/${record.ass !== 2 ? 'detail' : 'foundDetail'}?${
                      record.ass !== 2 ? 'insLsPkgId' : 'accuLsPkgId'
                    }=${record.grpId}&areaId=${record.areaId}&hshdRegFlag=${record.hshdRegFlag}`
                  )
                }
              >
                {record.grpName}
              </a>
            );
          }
        },
      },
    ];
    return (
      <Card
        title={<span id="socialInfor">社保公积金信息</span>}
        // extra={<a onClick={this.payDetail}>缴纳明细</a>}
      >
        <Table
          // bordered
          dataSource={serDto && serDto.detailSerDtos}
          columns={insAccuInfoColumns}
          pagination={false}
          size="default"
          style={{ width: '100%' }}
          rowKey={record => record.ass}
          scroll={{ x: 2000, y: 340 }}
        />
        {/* <Modal
          title="缴纳明细"
          visible={payDetailVisible}
          onOk={this.payDetailShut}
          onCancel={this.payDetailShut}
          width="70%"
        >
          <Table
            dataSource={serDto.detailSerDtos || []}
            columns={insAccuInfoColumns}
            rowKey={(_, index) => index}
            pagination={false}
            scroll={{ x: 2000 }}
          />
        </Modal> */}
      </Card>
    );
  }
}

export default EntryBasic;
